* {
    box-sizing: border-box;
}

/* 默认字体大小，适用于电脑端 */
html {
    font-size: 16px;
}


body {
    height: 100vh;
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 1;
}

body::before {
    content: "";
    position: fixed; /* 固定位置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 覆盖整个页面高度 */
    background: url("/static/images/background.jpg") no-repeat center center; /* 使用本地图片作为背景 */
    background-size: cover; /* 让背景图片覆盖整个页面 */
    z-index: -1; /* 确保背景在页面内容下方 */
}



main {
    flex-grow: 1;
}

.zone {
    background-color: rgba(255, 255, 255, 0.9);
    flex-grow: 1;
    overflow-y: auto; /* 当内容超出时启用滚动 */
    height: calc(100vh - 5rem);;
}

.card {
    background-color: rgba(255, 255, 255, 0.95);
}

.model-list {
    display: flex;               /* 使用 Flexbox */
    flex-direction: column;     /* 纵向排列内部元素 */
    align-items: center;        /* 水平居中 */
    padding: 0.5rem;
}

.button-container {
}

.cus-sm-btn {
    font-size: 0.7rem;  /* 设置字体为更小 */
    padding: 0.1rem 0.3rem;  /* 设置按钮内边距 */
    margin: 0 0.05rem;
}

.tactic-bg {
    background-color: #DAA520;
    font-size: 0.9rem;
    font-family: "行楷", "KaiTi", "Arial", sans-serif; /* 使用行楷作为首选字体 */
}

.model_selected {
    background-color: rgba(235, 235, 235, 0.9);
}

.module_executed {
    background-color: rgba(235, 235, 235, 0.9);
    color: #333; /* 字体颜色以适应背景 */
}

.temp {
    box-shadow: 0 0 0.5rem rgba(200, 200, 200, 0.6),
              0 0 1rem rgba(200, 200, 200, 0.6); /* 多层阴影模拟发光 */
    box-shadow: 0 0 0.5rem rgba(100, 100, 100, 0.6),
              0 0 1rem rgba(100, 100, 100, 0.6); /* 多层阴影模拟发光 */
}

/* 针对小屏幕（如手机）的字体大小 */
@media (max-width: 768px) {
    html {
        font-size: 10px; /* 手机端字体大小较小 */
    }
    #section-2 {
        height: 80vh; /* Section 2 高度占满整个屏幕高度 */
    }
    #section-3 {
        display: none; /* Section 3 隐藏 */
    }
}

